import React from 'react';
import ReactDOM from 'react-dom';

// 描述一个修改数据的操作，对象，type: 要干啥， payload: 原材料
// 描述一个 counter 增加 1 的数据操作 action
// const increment = {
//   type: 'increment',
//   payload: 1,
// };
// todos 待办事项
// 添加任务
const addTodo = {
  type: 'addTodo',
  payload: '12点吃饭',
};
// 删除任务
const delTodo = {
  type: 'delTodo',
  payload: 2,
};
const delTodo2 = {
  type: 'delTodo',
  payload: 1,
};

// 删除任务的 action creator
// const delTodoCreator = (id) => {
//   return {
//     type: 'delTodo',
//     payload: id,
//   };
// };

const delTodoCreator = (id) => ({ type: 'delTodo', payload: id });

console.log(delTodoCreator(1));
console.log(delTodoCreator(2));

// 发了这个action
const increment = {
  type: 'increment',
  payload: 10,
};

// reducer 的概念，是一个reducer
// const reducer = (state, action) => {
//   if (action.type === 'increment') {

//     return state + action.payload;
//   }

//   // 前面所有的type都不满足，返回当前state
//   return state;
// };

// 使用 switch 语句实现上面的逻辑
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return state + action.payload;

    default:
      return state;
  }
};

console.log('指令发对了', reducer(0, increment));
// store 内部会这样做
console.log('指令发对了', reducer(10, increment));

ReactDOM.render(<div>xxx</div>, document.getElementById('root'));
